import React from "react";
import { Button, Checkbox, Form, Input, Modal, Select } from "antd";
import { CloseOutlined, CloseSquareOutlined } from "@ant-design/icons";

import { req } from "@/common/methods";

import styles from "./index.module.scss";

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const App: React.FC<any> = (props: any) => {
  const { ty, defaultData, doClose, dataCategory } = props;
  console.log(dataCategory);
  const onFinish = (values: any) => {
    req(
      `/api/goods/${props.ty === "edit" ? "edit" : "create"}`,
      props.ty === "edit"
        ? { ...values }
        : { data: JSON.stringify([{ ...values }]) },
      "post"
    )
      .then((data) => {
        Modal.success({
          title: "成功",
          content:
            props.ty === "edit" ? (
              <>已将【{values.name}】的内容修改</>
            ) : (
              <>
                已添加【{values.name}】<br />
                新物品数据为0，您需要到入库单中进行入库
              </>
            ),
          onOk() {
            //console.log('这是Modal对象',Modal);
            //Modal.clear;
            //console.log('这是个关闭回调',doClose);
            doClose && doClose(data);
            Modal.destroyAll();
          },
        });
      })
      .catch((error) => {
        Modal.error({
          title: (props.ty === "edit" ? "修改" : "添加") + "失败",
          content: (
            <>
              <div>
                您的数据有可能修改失败，请检查！\r\n异常详情:{"" + error}
              </div>
            </>
          ),
        });
      });
  };

  const onFinishFailed = (errorInfo: any) => {
    Modal.error({
      title: "提交失败",
      content: (
        <>
          <div>
            信息未能正常提交，请检查！参考：
            {typeof errorInfo === "object"
              ? JSON.stringify(errorInfo || {})
              : "" + errorInfo}
          </div>
        </>
      ),
    });
  };

  return (
    <>
      <div className={styles.floatclose} onClick={() => Modal.destroyAll()}>
        <CloseOutlined
          style={{ fontSize: "20px" }}
          className={styles["close-icon"]}
        />
      </div>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ ...defaultData }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        {props.ty === "edit" && (
          <Form.Item<FieldType>
            label="惟一标识符"
            name="id"
            rules={[{ required: true, message: "惟一标识符不能为空" }]}
          >
            <Input disabled />
          </Form.Item>
        )}

        <Form.Item<FieldType>
          label="名称"
          name="name"
          rules={[{ required: true, message: "名称不能为空" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          label="类别"
          name="category"
          rules={[{ required: true, message: "名称不能为空" }]}
        >
          {/* <Input /> */}
          <Select
            options={[
              ...dataCategory.map((item) => ({
                value: item.id,
                label: item.name,
              })),
            ]}
          />
        </Form.Item>
        <Form.Item<FieldType>
          label="区域"
          name="local"
          rules={[{ required: true, message: "区域不能为空" }]}
        >
          <Select
            options={[
              {
                value: 1,
                label: "二楼仓库",
              },
            ]}
          />
        </Form.Item>
        <Form.Item<FieldType> label="参考图" name="img">
          <Input />
        </Form.Item>

        <Form.Item<FieldType> label="简介" name="detail">
          <Input.TextArea rows={4} />
        </Form.Item>

        <Form.Item<FieldType> label="规格" name="specs">
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="单位"
          name="unit"
          rules={[{ required: true, message: "单位不能为空" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType> label="别名" name="another_name">
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>

      {/* <Button onClick={()=>props.doClose()}>
            <CloseOutlined/>
        </Button> */}
    </>
  );
};

export default App;
